<script setup lang="ts">
//reactive是让引用类型数据具备响应式
import { ref, reactive } from 'vue';
// 给ref添加类型注解：Ref通过interfac定义需要加type
import type { Ref } from "vue";

//类型正规写法
// const user Ref<数据类型>=具体数据

// 一、ref让引用数据类型具备响应式写法
interface iUser{
  name:string
  age:number
  sex?:string
}
const user:Ref<iUser>=ref({
  name:'张三',
  age:18
})

function changeName(){
  user.value.name='李四'
}

// 二、通过reactive让引用类型数据具备响应式
// 加类型注解
const obj:iUser =reactive({
  name:'王五',
  sex:'男',
  age:20
})
function changeSex(){
  obj.sex='女'
}



</script>

<template>
  <h1>{{ user.name }}--{{ user.age }}</h1>
  <button @click="changeName">修改内容</button>
  <hr>
  <h1>{{ obj.name }}--{{ obj.age }}--{{ obj.sex }}</h1>
  <button @click="changeSex">修改性别</button>
</template>